<template>
  <div style="width: 200px" class="trade_tag">
    <div
      v-for="(item, index) in sliders"
      :key="index"
      class="trade_btn"
      @click.stop="onTradeTagClick({ index: index, item: item })"
      :class="{ active: activeIndex === index }"
    >
      <span>{{ item.label }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftRightSlider',
  props: {
    //滑块需要的值是个数组
    sliders: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      activeIndex: 0 //默认激活的下标为0
    }
  },

  methods: {
    onTradeTagClick({ index, item }) {
      console.log(index, item)
      this.activeIndex = index
    }
  }
}
</script>

<style scoped lang="scss">
.trade_tag {
  display: flex;
  height: 44px;
  width: 100%;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
}

.active {
  color: #ffffff;
  background-color: #0035b8;
  -webkit-transition: background-color 0.5s ease-in-out,
    -webkit-transform 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out,
    -webkit-transform 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out;
  transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out,
    -webkit-transform 0.5s ease-in-out;
}
.trade_btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  font-size: 14px;
  border: 1px solid #0035b8;
}
</style>
